<!DOCTYPE html>
<html lang="zh-CN"
      xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="model/boardModel">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <title>用户列表</title>

</head>
<body>

<div th:fragment="pagenav" th:remove="tag">
  <div th:replace="model/nav :: pageheader ('用户管理','用户管理')"></div>
</div>

<div th:fragment="content" th:remove="tag">


  <div class="row">
    <div class="col-xs-12">

      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">查询条件</h3>
          <div class="box-tools pull-right">
            <button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
          </div>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form role="form" id="queryForm" th:action="@{/user/list}" method="post" >
          <div class="box-body">
            <div class="row">

              <div class="col-xs-3">
                <input type="text" th:name="userName"  class="form-control input-sm" placeholder="账户"/>
              </div>
              <div class="col-xs-3">
                <input type="text" th:name="nickName" class="form-control input-sm" placeholder="姓名"/>
              </div>
              <div class="col-xs-3">
                <input type="text" th:name="phone" class="form-control input-sm" placeholder="电话"/>
              </div>

              <div class="col-xs-3">
                <button id="btn-query" type="button" class="btn btn-primary pull-right btn-sm">查询</button>
              </div>
            </div>
          </div>
          <!-- /.box-body -->

          <div class="box-footer">

          </div>
        </form>
      </div>


      <div class="box">
       <!-- <div class="box-header">
          <h3 class="box-title">用户列表</h3>

          <div class="box-tools">
            <a href="/user/add"><button type="button" class="btn btn-primary btn-sm" onclick="">新增</button></a>
          </div>

        </div>-->

        <!-- /.box-header -->
        <div class="box-body">
          <table id="dataTable" class="table table-striped table-bordered table-hover table-condensed">

            <thead >
            <tr>
              <th>账户</th>
              <th>名称</th>
              <th>电话</th>
              <th>状态</th>
              <th>备注</th>
              <th>创建时间</th>
              <th>操作</th>
            </tr>
            </thead>
          </table>
          <!--<div th:include="model/page :: pager" th:remove="tag"></div>-->
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
  </div>
  <div class="modal fade" id="confModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header" style="background-color: #307095;">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
          </button>
          <h4 class="modal-title">用户-授权</h4>
        </div>

        <div class="modal-body">
          <form class="form-horizontal"  id="confForm" action="/role/pro" method="post">
            <input type="hidden" id = "pro-roleId" class="form-control" name="userId"/>
            <div id="tree"></div>
          </form>
        </div>
        <!-- modal-body END -->

        <div class="modal-footer">
          <button type="submit" id="btn-prof" class="btn btn-primary">授权</button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

        <div class="modal-header" style="background-color: #307095;">
          <button type="button" id="btn_close" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span><span class="sr-only">关闭</span>
          </button>
          <h4 class="modal-title" id="myModalLabel2">信息-编辑</h4>
        </div>

        <div class="modal-body">
          <form class="form-horizontal"  id="editForm"  method="post">
            <input type="hidden" class="form-control" name="userId"/>
            <div class="form-group">
              <label  class="col-sm-3 control-label">账户</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="userName"
                       data-rule-required="true" data-msg-required="请录入用户名"
                       data-rule-minlength="2" data-msg-minlength="用户名最少2个字符"
                       data-rule-maxlength="20" data-msg-maxlength="用户名最大为20个字符"
                       placeholder="用户名"/>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">名称</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="nickName"
                       data-rule-required="true" data-msg-required="请录入名称"
                       data-rule-minlength="2" data-msg-minlength="名称最少2个字符"
                       data-rule-maxlength="20" data-msg-maxlength="名称最大为20个字符" placeholder="名称"/>
              </div>
            </div>
            <div class="form-group">
              <label  class="col-sm-3 control-label">联系电话</label>
              <div class="col-sm-9">
                <input type="text" class="form-control" name="phone"
                       data-rule-required="true" data-msg-required="请录入联系电话"
                       data-rule-iphone="true"
                       placeholder="联系电话"/>
              </div>
            </div>
            <div class="form-group" id="forPassword">
              <label  class="col-sm-3 control-label">密码</label>
              <div class="col-sm-9">
                <input type="password" class="form-control" id="password"  name="password"
                       data-rule-required="true" data-msg-required="请录入密码"
                       data-rule-minlength="6" data-msg-minlength="密码最少6位"
                       data-rule-maxlength="16" data-msg-maxlength="密码最多16位"
                       data-rule-commonString ="true" placeholder="密码(字母或数字6-16位)"/>
              </div>

            </div>
            <div class="form-group">
              <label  class="col-sm-3 control-label">状态</label>
              <div class="col-sm-9">
              <select class="form-control select2" name="status" id="inputStatus"  data-rule-required="true" data-msg-required="请选择用户状态" placeholder="请选择状态">
                <option value="1">正常</option>
                <option value="2">禁用</option>
              </select>
              </div>
            </div>

            <div class="form-group">
              <label  class="col-sm-3 control-label">备注</label>
              <div class="col-sm-9">
                <textarea class="form-control" name="memo" rows="3" id="inputMemo" placeholder="点击输入.."></textarea>
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="submit" id="btn-submit" class="btn btn-primary">提交</button>
        </div>
      </div>
    </div>
  </div>
<!-- DataTables -->

  <script>

      $(function (){
          var tables = $("#dataTable").dataTable({
              serverSide: true,//分页，取数据等等的都放到服务端去
              processing: true,//载入数据的时候是否显示“载入中”
              pageLength: 10,  //首次加载的数据条数
              ordering: false,//排序操作在服务端进行，所以可以关了。
              /*pagingType: "full_numbers",*/
              autoWidth: false,
              stateSave: true,//保持翻页状态，和tables.fnDraw(false);结合使用
              searching: false,
              ajax: {   //类似jquery的ajax参数，基本都可以用。
                  type: "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
                  url: "/user/list",
                  dataSrc: "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
                  data: function (d) {//d是原始的发送给服务器的数据，默认很长。
                      var param = {}; //因为服务端排序，可以新建一个参数对象
                      param.draw = d.draw;
                      param.start = d.start;
                      param.length = d.length;
                      var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
                      formData.forEach(function (e) {
                          param[e.name] = e.value;
                      });
                      return param;//自定义需要传递的参数。
                  }
              },
              columns: [//对应上面thead里面的序列
                  {"data": 'userName'},
                  {"data": 'nickName'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
                  {"data": 'phone'},
                  {"data": 'status',
                 "render":function(data,type,full,callback) {
                 if(data=='1')
                     return /*<![CDATA[*/"<span class='label label-success'>启用</span>"/*]]>*/;
                 else return /*<![CDATA[*/"<span class='label label-danger'>禁用</span>"/*]]>*/;
                 }
                 },
                  {"data": 'memo', defaultContent: ""},
                  {"data": 'createTimeStr', defaultContent: ""},
                  {"data": null,"width":"160px"}

              ],

            /*<![CDATA[*/
              columnDefs: [
                  {
                      targets: -1,//编辑
                      data: null,//下面这行，添加了编辑按钮和，删除按钮
                      defaultContent: "<div class='btn-group'><button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i>编辑</button>" +
                      "<button id='proRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-cog'></i>授权</button>" +
                      "<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i>删除</button></div>"
                  }
              ],
              dom: '<"toolbar">frtip',
            /*]]>*/

              //每加载完一行的回调函数
              createdRow: function( row, data, index ) {
                  //修改单元格样式
                  //$('td', row).eq(5).css('font-weight',"bold").css("color","red");//获取到具体行具体格的元素
              },
              initComplete: function (setting, json) {
                  //初始化完成之后替换原先的搜索框。
              },
              //在每次table被draw完后调用
              /*fnDrawCallback: function(){
                  var api = this.api();
                  //获取到本页开始的条数
                  var startIndex= api.context[0]._iDisplayStart;
                  api.column(0).nodes().each(function(cell, i) {
                      cell.innerHTML = startIndex + i + 1;
                  });
              },*/


              language: {
                  lengthMenu: "",//不显示记录条数选择
                  //lengthMenu: '<select class="form-control input-xsmall">' + '<option value="5">5</option>' + '<option value="10">10</option>' + '<option value="20">20</option>' + '<option value="30">30</option>' + '<option value="40">40</option>' + '<option value="50">50</option>' + '</select>条记录',//左上角的分页大小显示。
                  processing: "加载中",//处理页面数据的时候的显示
                /*<![CDATA[*/
                  paginate: {//分页的样式文本内容。
                      previous: "<",
                      next: ">",
                      first: "<<",
                      last: ">>"
                  },
                /*]]>*/
                  zeroRecords: "没有数据",//table tbody内容为空时，tbody的内容。
                  //下面三者构成了总体的左下角的内容。
                  //info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条 ",//筛选之后得到 _TOTAL_ 条，初始 _MAX_ 条   左下角的信息显示，大写的词为关键字。
                  info: "共 _PAGES_ 页，显示第 _START_ 到第 _END_ 条",
                  infoEmpty: "0条记录",//筛选为空时左下角的显示。0条记录
                  infoFiltered: "",//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
                  sSearch: "关键字："
              }

          });

        /*<![CDATA[*/
          $("div.toolbar").html('<button type="button" class="btn btn-primary btn-sm" id="btn-add">新增</button>');

        /*]]>*/

          //查询按钮
          $("#btn-query").on("click", function () {
              tables.fnDraw();
          });

          var url="/user/edit";
          //添加
          $("#btn-add").on("click", function () {
              $("#editModal input[name=userId]").val(null);
              $("#editModal input[name=userName]").val('');
              $("#editModal input[name=nickName]").val('');
              $("#editModal input[name=password]").val(null);
              $("#editModal input[name=phone]").val('');
              $("#editModal select[name=status]").val('');
              $("#inputMemo").val('');
              $("#myModalLabel2").text("信息-新增");
             $("#editModal").modal("show");

          });



          $(function () { $('#editModal').on('hide.bs.modal', function () {
              $("#editModal").css('display','none');
              $("#forPassword > label").show();
              $("#password").attr("type","password");
          })
          });



          //修改
          $("#dataTable tbody").on("click", "#editRow", function () {
              var data = tables.api().row($(this).parents("tr")).data();
              $("#forPassword > label").hide();
              $("#password").attr("type","hidden");
              $("#editModal input[name=userId]").val(data.userId);
              $("#editModal input[name=userName]").val(data.userName);
              $("#editModal input[name=nickName]").val(data.nickName);
              $("#editModal input[name=password]").val(data.password);
              $("#editModal input[name=phone]").val(data.phone);
              $("#editModal select[name=status]").val(data.status);
              $("#editModal textarea[name=memo]").val(data.memo);

             // url = "/user/edit";

              $("#editModal").modal("show");
          });
          var validater = $("#editForm").validate();
          //添加、修改  表单异步提交
          $("#btn-submit").on("click", function(){
             if(validater.form()) {
                 $("#btn-submit").attr("disabled",true);
                 $.ajax({
                     cache: false,
                     type: "POST",
                     url: url,
                     data: $("#editForm").serialize(),
                     dataType: "json",
                     async: false,
                     error: function (request) {
                         toastr.error("网络错误...");
                     },
                     success: function (data) {
                         //   data = $.parseJSON(data);
                         if (data.result == "200") {
                             $("#btn-submit").attr("disabled",false);
                             $("#editModal").modal("hide");
                             tables.fnDraw();
                             toastr.success(data.msg);
                             $("#forPassword > label").show();
                             $("#password").attr("type", "password");
                         } else {
                             toastr.error(data.msg);
                         }
                     }
                 });
             }
          });

          //删除
          $("#dataTable tbody").on("click", "#delRow", function () {
              var data = tables.api().row($(this).parents("tr")).data();
              bootbox.confirm(
                      {
                          message: "确认要删除吗",
                          buttons: {
                              confirm: {
                                  label: '确认'
                              },
                              cancel: {
                                  label: '取消'
                              }
                          },
                          callback: function (result) {
                              // 返回 true  或者false
                              if (result) {
                                  $.ajax({
                                      url:'/user/delete',
                                      type:'POST',
                                      data:{"userId":data.userId},
                                      dataType: "json",
                                      cache: "false",
                                      success:function(result){
                                          if(result.result == 200){
                                              toastr.success(result.msg);
                                              tables.api().row().remove().draw(false);
                                          }else{
                                              toastr.error(result.msg);
                                          }
                                      },
                                      error:function(err){
                                          toastr.error("网络错误...");
                                      }
                                  });
                              }
                          }
                      });


          });


          //打开菜单配置窗口
          $("#dataTable tbody").on("click", "#proRow", function () {
              var data = tables.api().row($(this).parents("tr")).data();
              $('#pro-roleId').val(data.userId);
              $.ajax({
                  url:'/user/getRole',
                  type:'POST',
                  data:{"userName" :data.userName},
                  dataType: "json",
                  cache: "false",
                  success:function(result){
                      if(result.result == 200){

                          $('#tree').treeview({data: result.data,
                              //    enableLinks:true,
                              highlightSelected:false,
                              multiSelect:true,
                              showCheckbox:true
                          });

                      }else{
                          toastr.error(result.msg);
                      }
                  },
                  error:function(err){
                      toastr.error("网络错误...");
                  }
              });

              $("#confModal").modal("show");
          });

          //保存角色菜单配置
          $("#btn-prof").on("click", function () {
              var arr = new Array();
              arr = $('#tree').treeview('getChecked', 0);
              var ids =[];
              arr.forEach(function( val, index ) {
                  ids.splice(index,0,val.tags);
              });
              if(ids.length==1) {
                  var userId = $('#pro-roleId').val();
                  $("#btn-prof").attr("disabled",true);
                  $.ajax({
                      url: '/role/auth/',
                      type: 'POST',
                      data: {ids: ids, userId: userId},
                      dataType: "json",
                      cache: "false",
                      success: function (result) {
                          if (result.result == 200) {
                              toastr.success(result.msg);
                              $("#btn-prof").attr("disabled",false);
                              $("#confModal").modal("hide");
                          } else {
                              toastr.error(result.msg);
                          }
                      },
                      error: function (err) {
                          toastr.error("网络错误...");
                      }
                  });
              }else{
                  alert("用户只能有一种角色");
              }
          })



      })



  </script>


</div>
</body>
</html>